import * as THREE from 'three'
import createThreeApp from '../../core'
function createAmbientLight (dom: HTMLElement) {
  const { camera, scene, renderer, gui } = createThreeApp(dom)
  // 激活阴影显示
  renderer.shadowMap.enabled = true
  //   renderer.shadowMap.type = THREE.PCFSoftShadowMap
  //   renderer.outputEncoding = THREE.sRGBEncoding

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)
  // const controls = new OrbitControls(camera, renderer.domElement)
  // console.log(controls)
  // 设置相机位置，不设置会在(0, 0, 0)位置
  camera.position.set(50, 60, -150)
  // 设置相机焦点，场景的中心店为(0, 0, 0)
  camera.lookAt(scene.position)
  // 设置环境光，参数1是环境光颜色，参数2是光的强度
  const ambient = new THREE.AmbientLight(0x000000, 1)
  scene.add(ambient)

  //   const directionalLight = new THREE.DirectionalLight(0xffffff, 1)
  //   directionalLight.position.set(0, 100, 0)
  //   scene.add(directionalLight)

  // 设置一个点光源
  const spotLight = new THREE.SpotLight(0xdddddd, 1)
  spotLight.position.set(40, 40, 0)
  spotLight.angle = Math.PI / 4
  // 光线边缘的模糊程度，值越大越模糊
  spotLight.penumbra = 0.1
  // 光线的衰减，值越大衰减程度越大
  spotLight.decay = 2
  spotLight.distance = 200

  spotLight.castShadow = true
  // 影响阴影的模糊程度，值越小越模糊
  spotLight.shadow.mapSize.width = 2048
  spotLight.shadow.mapSize.height = 2048
  spotLight.shadow.camera.near = 10
  spotLight.shadow.camera.far = 30
  spotLight.shadow.focus = 1
  scene.add(spotLight)

  // 查看点光源的范围
  const lightHelper = new THREE.SpotLightHelper(spotLight)
  scene.add(lightHelper)

  const shadowCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera)
  scene.add(shadowCameraHelper)

  const boxGeometry = new THREE.BoxGeometry(10, 10, 10)
  const boxMaterial = new THREE.MeshPhongMaterial({ color: 0x808080, dithering: true })
  const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial)
  // 开启对象的投射阴影
  boxMesh.castShadow = true
  boxMesh.position.set(10, 10, 10)
  scene.add(boxMesh)

  const material = new THREE.MeshPhongMaterial({ color: 0x808080, dithering: true })
  const geometry = new THREE.PlaneGeometry(2000, 2000)

  const mesh = new THREE.Mesh(geometry, material)
  mesh.position.set(0, -1, 0)
  mesh.rotation.x = -Math.PI * 0.5
  // 开启平面可以接受阴影
  mesh.receiveShadow = true
  scene.add(mesh)

  const state = {
    ambientLight: '#000000',
    spotLight: '#ffffff',
    penumbra: 0.1,
    decay: 2
  }
  gui.addColor(state, 'ambientLight').onChange((value: string) => {
    ambient.color = new THREE.Color(value)
  })
  gui.addColor(state, 'spotLight').onChange((value: string) => {
    spotLight.color = new THREE.Color(value)
  })
  gui.add(state, 'penumbra', 0, 3).onChange((value: number) => {
    spotLight.penumbra = value
  })
  gui.add(state, 'decay', 0, 10).onChange((value: number) => {
    spotLight.decay = value
  })
}

export {
  createAmbientLight
}
